<!--
 * @Author: WangShuai 1830773767@qq.com
 * @Date: 2025-06-19 23:11:50
 * @LastEditors: WangShuai 1830773767@qq.com
 * @LastEditTime: 2025-06-26 10:30:08
 * @FilePath: \shangyitong\src\components\HospitalTop\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!--
 * new page
 * @author: Blaine
 * @since: 2025-06-15
 * index.vue
-->
<template>
	<div class="top">
		<div class="content">
			<div class="left" @click="goHome">
				<img src="../../assets/images/logo.png" alt="" />
				<p>尚一通 预约挂号平台</p>
			</div>
			<div class="right">
				<div class="help">帮助中心</div>
                <!-- 如果没有用户名字就显示登录和注册 -->
				<div
					class="login"
					@click="login"
					v-if="!userStore.userInfo.name"
				>
					登陆/注册
				</div>
                <!-- 如果有用户信息就展示用户信息 -->
				<div class="login" v-else>
					<el-dropdown>
						<span class="el-dropdown-link">
							{{ userStore.userInfo.name}}
							<el-icon class="el-icon--right">
								<arrow-down />
							</el-icon>
						</span>
						<template #dropdown>
							<el-dropdown-menu>
								<el-dropdown-item @click="goUser('/user/certification')">实名认证</el-dropdown-item>
								<el-dropdown-item @click="goUser('/user/order')">挂号订单</el-dropdown-item>
								<el-dropdown-item @click="goUser('/user/patient')">就诊管理</el-dropdown-item>
								<el-dropdown-item @click="loginOut">退出登录</el-dropdown-item>
							</el-dropdown-menu>
						</template>
					</el-dropdown>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import useUserStore from '@/store/modules/user'
import { useRouter } from 'vue-router'
// import { ArrowDown } from '@element-plus/icons-vue' 
let $router = useRouter()
let userStore = useUserStore()


const goHome = () => {
	$router.push({
		path: '/home',
	})
}
//点击顶部下拉菜单跳转会员中心页面
const goUser = (path:string)=>{
    $router.push({
		path
	})
}
//登录事件回调 点击登录预注册按钮时候,弹出对话框
const login = () => {
	userStore.visible = true
}
//退出登录事件回调
const loginOut = ()=>{
    //通知pinia仓库清除用户相关信息
    userStore.userLogout()
    //退出登录成功后 跳转到Home页面
    $router.push({
		path: '/home',
	})
}
</script>

<style lang="scss" scoped>
.top {
	width: 100%;
	height: 70px;
	display: flex;
	justify-content: center;
	position: fixed;
	z-index: 999;
	border-bottom: 1px solid #dcdfe6;
	.content {
		width: 1200px;
		height: 70px;
		// background-color: rgb(238, 164, 164);
		display: flex;
		justify-content: space-between;
		.left {
			display: flex;
			justify-content: center;
			align-items: center;
			cursor: pointer;
			img {
				width: 50px;
				height: 50px;
				margin-right: 20px;
			}
			p {
				font-size: 20px;
				color: #55a6fe;
			}
		}
		.right {
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 14px;
			color: #a9a1a1;
			cursor: pointer;
			.help {
				margin-right: 5px;
			}
		}
	}
}
</style>
